<template>
  <nav-bar title="密码修改" left-text="" left-arrow @click-left="onClickLeft" />
  <p>当前手机号</p>
  <p><span>请输入验证码</span><input type="text" ><span style="float:right">验证码</span></p>
  <p><span>请输入新密码</span><input type="text" placeholder="密码由6-20位的数字，字母组成"></p>
  <p><span>请再次输入新密码</span><input type="text" placeholder="密码由6-20位的数字，字母组成"></p>
  <button>确认修改</button>
 </template>
<script setup>
import { useRouter } from "vue-router";
import { NavBar } from 'vant';
const onClickLeft=()=>{
router.go(-1)
};
const router = useRouter();
</script>
<style scoped>
p{
  width: 100%;
  height: 2.1875rem;
  border-bottom: 1px solid #f0f0f0;
  line-height: 2.1875rem;
  border-top: .3125rem solid rgb(240,243,248);
  font-size: .7rem;
  text-indent: .5rem;
  padding-right:.6rem ;
  box-sizing: border-box;
}
input{
  width: 50%;
  height: 20px;
  border: none;
  /* border-bottom: 1px solid #f0f0f0; */
  line-height: 2.1875rem;
  /* border-top: .3125rem solid rgb(240,243,248); */
  font-size: .8rem;
  text-indent: .5rem;
  padding-right:.6rem ;
  box-sizing: border-box;
  font-size: .7rem;
  
}
button{
  box-sizing: border-box;
  margin: .9375rem 1.125rem;
  width: 90%;
  height: 1.5rem;
  border: none;
  background-color: var(--main-color);
  border-radius: .9125rem;
  color: white;
  font-size: .6rem;
  box-shadow: 0px 1px 3px rgb(212, 212, 212);

}
</style>